<template>
  <div class="bg_fff main">
    <h3 class="title"><i class="el-icon-user-solid"></i>头像管理</h3>
    <div class="btn-list">
      <el-button type="primary" icon="el-icon-refresh" size='small'>刷新</el-button>
    </div>
    <div class="p10">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="手机号码：">
          <el-input v-model="formInline.user" placeholder="手机号码"></el-input>
        </el-form-item>
        <el-form-item label="昵称：">
          <el-input v-model="formInline.name" placeholder="昵称"></el-input>
        </el-form-item>
        <el-form-item label="注册时间：">
          <div class="block">
            <el-date-picker
              v-model="value"
              type="datetimerange"
              :picker-options="pickerOptions"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right">
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
      </el-form>
      <el-table :data="tableData" stripe border style="width: 100%">
        <el-table-column prop="date" label="手机号">
        </el-table-column>
        <el-table-column prop="name" label="昵称">
        </el-table-column>
        <el-table-column prop="address" label="性别">
        </el-table-column>
        <el-table-column prop="address" label="头像">
        </el-table-column>
        <el-table-column prop="address" label="修改时间">
        </el-table-column>
        <el-table-column prop="address" label="操作">
        </el-table-column>
      </el-table>
    </div>
    <div class="block p20 tac">
      <el-pagination
        :page-size="10"
        background
        layout="total, prev, pager, next, jumper"
        @current-change='handleCurrentChange'
        :total="400">
      </el-pagination>
    </div>
  </div>
</template>
<script>
	export default{
		data(){
			return{
				tableData:[],
        formInline:{},
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        value: '',
			}
		},
		methods: {
		    handleCurrentChange(val) {
		        console.log(`当前页: ${val}`);
		    },
        onSubmit(){
          
        }
		  }
	};
</script>